<template>
	<view>
		<u-navbar height="60" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view slot="center" class="u-nav-slot">
				<view style=" font-size: 20px;">用户资料</view>
			</view>
		</u-navbar>
		<view v-if="info">
			<view class="text-xl text-gray margin-left-sm margin-top-lg">基础信息</view>

			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;" @click="show = !show">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">头像</text>
				<view class="cu-avatar lg round margin-top-sm  margin-bottom-sm margin-right-xl"
					:style="'background-image:url(' + imgUrl + info.image+ ');'">
				</view>
			</view>

			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;" @click="upNameVisible = true">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">用户名</text>
				<view class="text-xl lg round margin-top-lg  margin-bottom-lg margin-right-xl">{{info.username}}</view>
			</view>


			<view class="text-xl text-gray margin-left-sm margin-top-lg">安全信息</view>

			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">密码</text>
				<view class="text-xl text-blue lg round margin-top-lg  margin-bottom-lg margin-right-xl"
					@click="upPswdVisible = true">修改密码</view>
			</view>

			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">手机号</text>
				<view class="text-xl lg round margin-top-lg  margin-bottom-lg margin-right-xl">{{info.mobile}}</view>
			</view>
			
			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">邮箱</text>
				<view class="text-xl lg round margin-top-lg  margin-bottom-lg margin-right-xl" :class="!info.email?'text-blue':''"
				@click="binEamilVisible = true">{{info.email?info.email:'绑定邮箱'}}</view>
			</view>
			

			<view class="bg-white margin-top-sm flex solid-bottom  justify-between"
				style="display: flex;flex-direction: row;">
				<text class="text-xl  margin-left-sm margin-top-lg  radius">其他操作</text>
				<view class="text-xl text-blue lg round margin-top-lg  margin-bottom-lg margin-right-xl"
					@click="delAccount">注销账号</view>
			</view>


			<view class="justify-center cu-bar shadow foot">
				<button class="cu-btn block bg-blue lg margin-xl" style="border-radius: 10vh;"
					@click="outLogin">退出登录</button>
			</view>

			<!-- 修改用户名模态框 -->
			<u-modal :show="upNameVisible" title="修改用户名" content='content' showCancelButton
				@cancel="upNameVisible = false" @confirm="updateUser">
				<view class="">
					<u--form>
					<u-form-item borderBottom>
						<u--input v-model="username" border="none" inputAlign="center" placeholder="请输入新用户名"></u--input>
					</u-form-item>
					</u--form>
				</view>
			</u-modal>
			
			<!-- 绑定邮箱 -->
			<u-modal :show="binEamilVisible" title="绑定邮箱" content='content' showCancelButton
				@cancel="binEamilVisible = false" @confirm="binEamil">
				<view class="">
					<u--form>
					<u-form-item borderBottom>
						<u--input v-model="info.email" border="none" inputAlign="center" placeholder="请输入邮箱"></u--input>
					</u-form-item>
					</u--form>
				</view>
			</u-modal>

			<!-- 修改密码模态框 -->
			<u-modal :show="upPswdVisible" title="修改密码" content='content' showCancelButton
				@cancel="upPswdVisible = false" @confirm="savePassword">
				<view class="">
					<u--form>
						<u-form-item borderBottom>
							<u--input type="password" v-model="password" border="none" inputAlign="center" placeholder="请输入旧密码">
							</u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<u--input type="password" v-model="newPassword" border="none" inputAlign="center" placeholder="请输入新密码">
							</u--input>
						</u-form-item>
						<u-form-item borderBottom>
							<u--input type="password" v-model="newPasswordTwo" border="none" inputAlign="center" placeholder="请再次输入新密码">
							</u--input>
						</u-form-item>
					</u--form>	
				</view>
			</u-modal>

			<!-- 更换头像-->
			<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" mode="bottom" :show="show" @close="close">
				<view class=" padding-lg ">
					<view class="flex justify-center align-center">
						<text class="text-gray">修改头像</text>
					</view>
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="camera">手机拍照</button>
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="album">本地图片</button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		strLen,
		isEmail
	} from '@/util/validate'
	export default {
		data() {
			return {
				show: false,
				popupData: {
					overlay: true,
					mode: 'bottom',
					borderRadius: '',
					closeable: true,
					closeOnClickOverlay: true
				},
				imgUrl: this.imgUrl,
				upPswdVisible: false,
				upNameVisible: false,
				password: null,
				newPassword: null,
				newPasswordTwo: null,
				username: null,
				info: null,
				modalImg: null,
				binEamilVisible: false,
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 绑定邮箱
			binEamil(){
				if (!isEmail(this.info.email)) {
					this.info.email = null
					uni.showToast({
						title: '邮箱格式不正确！',
						icon: 'none'
					})
					this.binEamilVisible = false
					return
				}
				this.updateUser()
				this.binEamilVisible = false
			},
			// 获取用户信息
			getUserInfo() {
				let that = this
				this.$http.request({
					url: 'app/user/userInfo',
					method: 'GET',
					success: (data) => {
						if (data.data && data.data.code == 0) {
							that.info = data.data.user
						}
					}
				})
			},
			//修改密码
			savePassword() {
				if (this.password == null || this.newPassword == null || this.newPasswordTwo == null) {
					this.upPswdVisible = null
					uni.showToast({
						title: '存在空项',
						icon: 'none'
					})
					return
				}
				if (this.newPassword != this.newPasswordTwo) {
					this.upPswdVisible = null
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return
				}
				this.$http.request({
					url: 'app/user/password',
					method: 'POST',
					data: {
						userId: this.info.userId,
						password: this.password,
						newPassword: this.newPassword
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							uni.removeStorageSync('token');
							uni.reLaunch({
								url: '/pages/user/login'
							})
						}
					}
				})
			},
			//修改用户信息
			updateUser() {
				if (!strLen(this.username)) {
					this.upNameVisible = null
					uni.showToast({
						title: '用户名长度小于3位',
						icon: 'none'
					})
					return
				}
				this.$http.request({
					url: 'app/user/update',
					method: 'POST',
					data: {
						userId: this.info.userId,
						username: this.username,
						email: this.info.email
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.upNameVisible = null
							this.username = null
							this.getUserInfo()
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
						}
					}
				})
			},
			
			//注销账号
			delAccount() {
				uni.showToast({
					title: '该功能暂未开放',
					icon: 'none'
				})
			},
			// 退出登录
			outLogin() {
				uni.removeStorageSync('token');
				uni.reLaunch({
					url: '/pages/user/login'
				})
			},
			close() {
				this.show = false
			},

			camera() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //拍照获取
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.$http.baseUrl + 'app/user/updateImage', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							header: {
								'token': uni.getStorageSync("token")
							},
							name: 'file',
							success: (data) => {
								that.getUserInfo()
								that.modalImg = null
							}
						})
					}
				})
			},
			album() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.$http.baseUrl + 'app/user/updateImage', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': uni.getStorageSync("token")
							},
							success: (data) => {
								that.getUserInfo()
								that.modalImg = null
							}
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
